<template>
  <view>
    <!--标题-->
    <FundTitle title="阶段、年度收益"></FundTitle>

    <!--内容-->
    <view>
      <wd-row>
        <wd-col :span="6">
          <view class="stage-list">
            <view
              class="stage-item"
              v-for="value in tabList"
              :key="value.key"
              :class="active === value.key ? 'stage-item-active' : ''"
              @click="handleChange(value.key)"
            >
              {{ value.title }}
              <view
                class="stage-item-line"
                :class="active === value.key ? 'stage-item-line-active' : ''"
              ></view>
            </view>
          </view>
        </wd-col>
        <wd-col :span="18">
          <!--列表区-->
          <view style="padding: 0rpx 10rpx; text-align: center; font-size: 24rpx">
            <!--表头-->
            <view style="border: 2rpx solid #f2f2f2; padding: 10rpx 0rpx; border-radius: 10rpx">
              <wd-row>
                <wd-col :span="8">时间</wd-col>
                <wd-col :span="8">收益表现</wd-col>
                <wd-col :span="8">回撤表现</wd-col>
              </wd-row>
            </view>
            <!--空数据提示-->
            <wd-status-tip
              image="../../static/content.png"
              tip="暂无数据"
              v-if="dataList.length == 0"
            />
            <!--数据列表-->
            <view
              v-else
              v-for="value in dataList"
              :key="value"
              style="padding: 10rpx 0rpx; font-size: 20rpx"
            >
              <wd-row>
                <wd-col :span="8">{{ value.sub_type }}</wd-col>
                <wd-col :span="8">
                  <text :style="{ color: value.fund_sy >= 0 ? 'red' : 'green' }">
                    {{
                      value.fund_sy == null
                        ? '--'
                        : value.fund_sy >= 0
                          ? '+' + value.fund_sy
                          : value.fund_sy
                    }}%
                  </text>
                </wd-col>
                <wd-col :span="8">
                  <text>{{ value.fund_hc || '-- ' }}%</text>
                </wd-col>
              </wd-row>
            </view>
            <view
              style="color: gray; margin-top: 20rpx"
              @click="onClickMore"
              v-if="pages !== pageNo && dataList.length > 0"
            >
              查看更多
            </view>
          </view>
        </wd-col>
      </wd-row>
    </view>
  </view>
</template>

<script lang="ts" setup>
import FundTitle from './fund-title.vue'
import { http } from '@/utils/http'

// 定义可传递属性
const props = defineProps({
  id: {
    type: String,
    default: '',
  },
})
const active = ref('stage-type')
const tabList = ref([
  {
    title: '阶段收益',
    key: 'stage-type',
  },
  {
    title: '年度收益',
    key: 'year-type',
  },
])
// 数据列表
const dataList = ref([])
// 当前页
const pageNo = ref(1)
// 总数
const pages = ref(0)
// 加载数据
const loadData = () => {
  http
    .get('/sys/fund/achievement/page', {
      fundId: props.id,
      type: active.value,
      pageSize: 6,
      pageNo: pageNo.value,
    })
    .then((res: any) => {
      if (res.success) {
        if (pageNo.value === 1) {
          dataList.value = res.result.records
        } else {
          res.result.records.forEach((item) => dataList.value.push(item))
        }
        pages.value = res.result.pages
      }
    })
}

// 切换tab
const handleChange = (key) => {
  // 切换tab
  active.value = key
  // 设置默认第一页
  pageNo.value = 1
  // 加载数据
  loadData()
}

// 点击查看更多
const onClickMore = () => {
  if (pageNo.value < pages.value) {
    pageNo.value += 1
    loadData()
  }
}

onLoad(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.stage-list {
  border-radius: 10rpx;
  background-color: #e9f0ff;
  .stage-item {
    text-align: center;
    padding: 24rpx 0rpx;
    font-size: 24rpx;
    .stage-item-line {
      width: 40rpx;
      height: 4rpx;
      border-radius: 1rpx;
      margin: 5rpx auto 0rpx auto;
    }
    .stage-item-line-active {
      background-color: #0083ff;
    }
  }
  .stage-item-active {
    color: #0083ff;
  }
}
</style>
